<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>点餐系统后台</title>
    <link href="webjars/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="webjars/jquery/3.0.0/jquery.min.js"></script>
    <script src="webjars/popper.js"></script>
    <script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link" href="/userinfo.html">个人首页</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/rankinglist.html">排行榜</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/admin/menusmanage.html">菜品管理</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="/background.html">订单管理</a>
    </li>
</ul>


<div class="container p-5">
    <div id="accordion">
        <div class="card" th:each="orderTable : ${orderTableList}">
            <div class="card-header" th:id="'heading'+${orderTable.order.oId}">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-toggle="collapse"
                            th:data-target="'#collapse'+${orderTable.order.oId}" aria-expanded="false"
                            th:aria-controls="'collapse'+${orderTable.order.oId}">
                        <span th:text="'订单号：' + ${orderTable.order.oId}"></span>
                    </button>
                </h5>
            </div>

            <div th:id="'collapse'+${orderTable.order.oId}" class="collapse"
                 aria-labelledby="'heading'+${orderTable.order.oId}" data-parent="#accordion">
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-9">
                            <h4><p th:text="'用户id:'+${orderTable.order.uId} +'所点菜品'"></p></h4>
                        </div>
                        <div class="col-md-3">
                            <span th:if="${orderTable.order.ispayed} eq '1'">未</span>支付<br>
                            <span th:if="${orderTable.order.isfinished} eq '1'">未</span>上完菜品
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-9">
                            <ul>
                                <li th:each=" food : ${orderTable.foodList}">
                                    <p th:text="${food.mName}"></p>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-3">
                            <a th:href="@{'backgroundfinish.do?oid='+${orderTable.order.oId}}">出单</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="message"></div>

</body>


<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/websocket");
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
        log.info("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        //setMessageInnerHTML(event.data);
        setTimeout(function () {
            location.reload()
        }, 3000);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('List').value;
        websocket.send(message);
    }

</script>


</html>